<!-- <script src="http://code.jquery.com/jquery-1.9.1.js"></script> -->
<script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<link href="http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
  .container {text-align: center;width: 1000px;}
  .logo {color: #2b83bf;font-size: 80px;}
  /*.note-add-div {border: 2px dashed #ccc;}*/
  .note-add-content {border: 0px;border: 2px dashed #ccc;height: 60px;}
  .note-item {margin-top:6px;text-align: left;overflow: hidden;border: 1px solid #e1e3e5;border-left: 8px solid #bbc9d5;}
  .note-item:hover {border-left: 8px solid #2b83bf;background:#fdfae8;}
  .note-item-no {color: #2b83bf;font-size: 70px;line-height:70px;font-weight: bold;}
  .note-item-no:hover {color: #bbc9d5;}
  .note-content-div {padding: 10px 0;}
  .note-edit, .note-delete{font-size: 20px;line-height: 20px;}
  .note-right-btns {margin-top: 10px;}
</style>
<title>Html5 note, To do lists!</title>
<div class="container">
  <h1 class="logo">NOTE, TO DO LIST</h1>
  <form method="post" action="{:U('Home/Note/add')}" style="overflow:hidden;" class="note-add-div">
  	<!-- <div class="col-sm-12"> -->
  	  <input name="content" type="text" placeholder="请输入记事内容(按回车保存)..." class="form-control note-add-content">
    <!-- </div> -->
    <!-- <input type="submit" value="保存" class="btn btn-success btn-large col-sm-2"> -->
  </form>
  <div>
  <volist name="notes" id="ns">
    <div class="note-item">
    <div class="col-sm-1 note-item-no">{$i}</div>
  	<div class="col-sm-9 note-content-div">
      <span class="note-content">{$ns.content}</span>
  	</div>
    <div class="col-sm-2 btn-group note-right-btns">
      <a href="#" class="note-edit col-sm-6 btn btn-default" noteid="{$ns.id}"
        data-toggle="modal" data-target="#myModal">编辑</a>
      <a href="{:U('Home/Note/delete', 'id='.$ns['id'])}" class="note-delete col-sm-6 btn btn-danger">删除</a>
    </div>
  </div>
  </volist>
  </div>
  <br><br>

  <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">笔记编辑</h4>
      </div>
      <div class="modal-body">
        <textarea class="form-control note-content-edit" rows="3">今天你快乐吗，亲？</textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary note-update-save">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</div>
<script type="text/javascript">
  var noteid = '';
  $.each($('.note-edit'), function(i , n) {
  	noteid = $(n).attr('noteid');
  	var getNoteUrl = '__URL__' + '/get/id/' + noteid;
  	console.log(getNoteUrl);
  	$(n).on('click', function() {
  	  console.log($(this));
  	  var p = $(this).parents('.note-item');
  	  console.log(p);
  	  var content = p.find('.note-content').val();
  	  console.log(content);
      $.get(getNoteUrl, function(json) {
        var content = json.content;
        $('.note-content-edit').val(content);
        $('.note-update-save').attr('noteid', noteid);
  	  });
    // $.ajax({
    //   type: "GET",
    //   url: getNoteUrl,
    //   dataType: "json",
    //   complete: function(data) {
    //     console.log(data);
    //   }
    // });
  	});
  	console.log(noteid);
  });
  var updateUrl = '__URL__' + '/update';
  $('.note-update-save').on('click', function() {
    var data = {};
    data['id'] = noteid;
    data['content'] = $('.note-content-edit').val();
    console.log(data);
    $.post(updateUrl, data, function(data) {
      console.log(data);
      window.location.reload();
    });
  });
</script>